import React, { Component } from 'react';
import { View, Text, Image, TextInput, StyleSheet, TouchableWithoutFeedback, Alert ,Keyboard} from 'react-native';
import { connect } from 'react-redux'
import { Colors, AppStyles } from '../../style';
import { Button } from 'antd-mobile-rn';
import { default as Images } from '../../images';
import { NavigationActions, createAction } from '../../common/utils';
import { isPhone } from '../../common/utils/RegUtil';
import * as UserDao from '../../common/dao/UserDao';
var account = '';
var pwd = '';

@connect(({user})=>({user}))
export default class Login extends Component {

    static navigationOptions = {
        title: '登录'
    }


    constructor(props) {
        super(props);
        this.state = {
            phoneError: false,
            pwdError: false,
        }
    }

    _isPhone() {
        error = !isPhone(account);
        console.log(error);
        this.setState({
            phoneError: error
        })
    }

    _pwd() {
        error = pwd.length == 0;
        console.log(error);
        this.setState({
            pwdError: error
        })
    }

    componentWillReceiveProps() {
        if (this.props.user.loginError) {
            Alert.alert(this.props.user.loginErrorMsg);
        }
    }

    render() {
        console.log('Login');
        return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
            <View style={{ width: 300, borderColor: Colors.black, borderRadius: 5, borderWidth: 1.0, justifyContent: 'center', alignItems: 'center' }}>
                <View style={{ height: 50 }} />
                <View style={{ width: 100, height: 100, backgroundColor: '#12a' }} />
                <View style={{ height: 10 }} ></View>
                <View style={{ height: 20 }} >
                    {this.state.phoneError && <Text style={[AppStyles.smallTextStyle, { color: Colors.red }]}>请输入正确的手机号</Text>}
                </View>
                <View style={styles.textinput}>
                    <Image style={styles.icon} source={Images.user} />
                    <TextInput style={styles.subTextInpput} placeholder={'请输入手机'} keyboardType={'phone-pad'} clearButtonMode={'always'}
                        onChangeText={(text) => { account = text.trim() }}
                        onEndEditing={() => {
                            error = !isPhone(account);
                            console.log(error);
                            this.setState({
                                phoneError: error
                            })
                        }}
                    />
                </View>
                <View style={{ height: 20 }} >
                    {this.state.pwdError && <Text style={[AppStyles.smallTextStyle, { color: Colors.red }]}>密码不能为空</Text>}
                </View>
                <View style={styles.textinput}>
                    <Image style={styles.icon} source={Images.key} />
                    <TextInput style={styles.subTextInpput} placeholder={'请输入密码'} secureTextEntry={true} clearButtonMode={'always'}
                        onChangeText={(text) => { pwd = text.trim() }}
                        onEndEditing={() => {
                            error = pwd.length == 0;
                            this.setState({
                                pwdError: error
                            })
                        }}
                    />
                </View>
                <View style={{ width: 210, marginTop: 10, marginBottom: 20 }}>
                    <Button style={{ backgroundColor: Colors.black, borderRadius: 15 }}
                        size={'large'} onClick={() => {
                            //Alert.alert(account);
                            Keyboard.dismiss()
                            this._isPhone()
                            this._pwd()
                            if(isPhone(account) && pwd.length > 0){
                                this.props.dispatch(createAction('user/login')({
                                    var: account, password: pwd
                                }))
                            }
                            //this.props.dispatch(NavigationActions.navigate({ routeName: 'Main' }))
                        }}>
                        <Text style={AppStyles.bigWhiteTextStyle}>登录</Text>
                    </Button>
                </View>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 10 }}>
                <TouchableWithoutFeedback onPress={() => {

                }}>
                    <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>忘记密码</Text>
                </TouchableWithoutFeedback>
                <View style={{ width: 2 }} />
                <Text style={AppStyles.smallTextStyle}>|没有账号</Text>
                <View style={{ width: 3 }} />
                <TouchableWithoutFeedback onPress={() => {
                    this.props.dispatch(NavigationActions.navigate({ routeName: 'Register' }))
                }}>
                    <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>注册一个</Text>
                </TouchableWithoutFeedback>
            </View>
        </View>)
    }
}

const styles = StyleSheet.create({
    textinput: {
        borderColor: Colors.black,
        borderRadius: 5,
        borderWidth: 1.0,
        flexDirection: 'row',
        alignItems: 'center'
    },
    subTextInpput: {
        width: 200,
        padding: 0
    },
    icon: {
        width: 30,
        height: 30,
        margin: 5
    },
    registerText: {
        fontSize: 13,
        color: '#000',
    }
})